// 图片懒加载指令插件
import { useIntersectionObserver } from '@vueuse/core'
export const lazyPlugin = {
  // 自定义插件
  install(app) {
    // 自定义指令
    app.directive('img-lazy', {
      mounted(el, binding) {
        // el 指令绑定的哪个元素 img
        // binding：binding.value 指令等于号后面绑定的表达式的值 图片的 url
        const target = el

        const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            el.src = binding.value
            stop()
          }
        })
      }
    })
  }
}
